<template>
        <div class="tb">
            <mt-field label="车牌号:" placeholder="请输入" type="text" v-model="fzdcbfd12019001" ></mt-field>
            <mt-field label="车牌颜色:" placeholder="请输入" type="text" :readonly="true" v-model="currentTagsColor.name" @click.native.capture="choseColor" ></mt-field>
            <mt-field label="日期:" placeholder="请输入起止日期(如：2-6)" type="text" v-model="fzdcbfd12019002" ></mt-field>
            <mt-field label="趟次序号:" placeholder="请输入" type="number" v-model="fzdcbfd12019003" ></mt-field>
            <mt-field label="趟次数(个):" placeholder="请输入" type="number" v-model="fzdcbfd12019004" ></mt-field>

            <mt-field label="起点:" placeholder="请输入" type="text" :readonly="true" v-model="startingPoint" @click.native.capture="showStart1"></mt-field>
            <mt-field label="终点:" placeholder="请输入" type="text" :readonly="true" v-model="endPoint" @click.native.capture="showStart2"></mt-field>
            <mt-field label="货物种类:" placeholder="请输入" type="text" :readonly="true" v-model="hwType" @click.native.capture="choseHwzl"></mt-field>

            <mt-field label="单趟次运量(吨):" placeholder="请输入" type="number" v-model="fzdcbfd12019008"></mt-field>
            <mt-field label="单趟次货物周转量(吨公里):" placeholder="请输入" type="number" v-model="fzdcbfd12019009" ></mt-field>
            <mt-field label="平均运距(公里):" placeholder="请输入" type="number" v-model="fzdcbfd12019010"></mt-field>
            <mt-field label="单趟次集装箱箱运量（TEU）:" placeholder="请输入" type="number" v-model="fzdcbfd12019011"></mt-field>
            <div class="button">
                <mt-button type="primary" size="large" @click="check">确定</mt-button>
            </div>

            <!-- 起点选择器 -->
            <mt-popup
            v-model="popupVisible1"
            popup-transition="popup-fade"
            closeOnClickModal="true"
            position="bottom"
            >
            <mt-picker :slots="slotss" @change="onValuesChange1"  value-key="value" showToolbar>
                <mt-header title="选择省市区">
                    <mt-button slot="left" class="cancle" @click="popupVisible1 = !popupVisible1">取消</mt-button> 
                    <mt-button slot="right" class="sure" @click="sure">确定</mt-button>                       
                    </mt-header>   
                </mt-picker> 
            </mt-popup>
            <!-- 终点选择器 -->
            <mt-popup
            v-model="popupVisible2"
            popup-transition="popup-fade"
            closeOnClickModal="true"
            position="bottom"
            >
            <mt-picker :slots="slotss" @change="onValuesChange1"  value-key="value" showToolbar>
                <mt-header title="选择省市区">
                    <mt-button slot="left" class="cancle" @click="popupVisible2 = !popupVisible2">取消</mt-button> 
                    <mt-button slot="right" class="sure" @click="sure1">确定</mt-button>                       
                    </mt-header>   
                </mt-picker> 
            </mt-popup>
            <!-- 货物种类选择器 -->
            <mt-popup
            v-model="popupVisible"
            popup-transition="popup-fade"
            closeOnClickModal="true"
            position="bottom">
            <mt-picker :slots="slots"  showToolbar ref="picker" value-key="name">
                <div class="picker-toolbar-title">
                <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
                <div class>请选择货物种类</div>
                <div class="usi-btn-sure" @click="handleConfig">确定</div>
                </div>
            </mt-picker>
            </mt-popup>
            <!-- 车牌颜色选择器 -->
            <mt-popup
            v-model="popupVisibleColor"
            popup-transition="popup-fade"
            closeOnClickModal="true"
            position="bottom">
            <mt-picker :slots="slotsColor"  showToolbar ref="pickerColor" value-key="name">
                <div class="picker-toolbar-title">
                <div class="usi-btn-cancel" @click="popupVisibleColor = !popupVisibleColor">取消</div>
                <div class>请选择车牌颜色</div>
                <div class="usi-btn-sure" @click="handleConfigColor">确定</div>
                </div>
            </mt-picker>
            </mt-popup>
        </div>
    </template>
    
    <script>
        import { Field } from 'mint-ui';
        import {Toast} from 'mint-ui'
        export default {
            data() {
                return {
                        fzdcbfd12019029: "",
                        recid: "",
                        yhmlk: "",
                        fzdcbfd12019001: '',
                        fzdcbfd12019002: '',
                        fzdcbfd12019003: '',
                        fzdcbfd12019004: '',
                        fzdcbfd12019005: '',
                        fzdcbfd12019006: '',
                        fzdcbfd12019007: '',
                        fzdcbfd12019008: '',
                        fzdcbfd12019009: '',
                        fzdcbfd12019010: '',
                        fzdcbfd12019011: '',
                        startingPoint: '',
                        endPoint: '',
                        hwType: '',
                        iosProvincesName: '',
                        iosCitysName: '',
                        iosCountysName: '',

                        showToolbar: true,
                        slots: [
                            {
                            values: []
                            }
                        ],
                        result: '',
                        provinceValue: '',
                        cityValue: '',
                        countyValue: '',
                        countyCode: '',
                        startInfo:'',
                        endInfo:'',
                        first: '', 
                        second: '', 
                        third: '',
                        iosProvinces: '',
                        iosCitys: '',
                        iosCountys: '',
                        
                        slotss: [{
                                        flex: 1,
                                        values: [],
                                        className: 'slot1',
                                        textAlign: 'left',
                                        defaultIndex: 0
                                    }, {
                                        flex: 1,
                                        values: [],
                                        className: 'slot2',
                                        textAlign: 'center',
                                        defaultIndex: 0                    
                                    }, {
                                        flex: 1,
                                        values: [],
                                        className: 'slot3',
                                        textAlign: 'right',
                                        defaultIndex: 0                    
                                }],
                        popupVisible: false,
                        popupVisible1: false,
                        popupVisible2: false,
                        currentTags: {},
                        popupVisibleColor: false,
                        currentTagsColor: {},
                        slotsColor: [
                            {
                            values: [{"code":"1","flag":"Dcq","name":"蓝色"},
                            {"code":"2","flag":"Dcq","name":"黄色"},
                            {"code":"3","flag":"Dcq","name":"黑色"},
                            {"code":"4","flag":"Dcq","name":"白色"},
                            {"code":"5","flag":"Dcq","name":"黄绿"},
                            {"code":"6","flag":"Dcq","name":"渐变绿"},
                            {"code":"9","flag":"Dcq","name":"其他"},]
                            }
                        ],
                }
            },
            watch: {
                fzdcbfd12019008(newVal) {
                    if(newVal != '' && this.fzdcbfd12019010 != ''){
                        this.fzdcbfd12019009 = parseFloat(this.fzdcbfd12019010) * newVal;
                    }
                },
                fzdcbfd12019009(newVal){  
                    if(newVal != "" && this.fzdcbfd12019008 != ""){
                        this.fzdcbfd12019010 = (parseFloat(newVal)/parseFloat(this.fzdcbfd12019008)).toFixed(1);
                    }             
                },
                // fzdcbfd12019010(newVal){
                //     this.fzdcbfd12019009 = parseFloat(this.fzdcbfd12019008)*newVal;
                // }
            },
            created() {
                
            },
            mounted() {
                this.getDate();
            },
            methods: {
                getDate(){
                    let data = {};
                    data.recid = this.$route.query.recid;
                    this.axios.post('http://zxdc.catsic.com:9090/sampling/assit/selectFzdcbfd01', {'data': data}, {
                        'headers': {
                            'Content-Type': 'application/json',
                            'mobileHeader': '{"sessionId":' + localStorage.getItem('sessionId') + '}'
                        }
                    }).then(result => {
                        if (result.data.status == "1000") {
                            let fzdcbfd01 = result.data.data.Fzdcbfd01;
                            this.recid = fzdcbfd01.recid,
                            this.yhmlk= fzdcbfd01.yhmlk,
                            this.fzdcbfd12019001 = fzdcbfd01.fzdcbfd12019001,
                            this.fzdcbfd12019002 = fzdcbfd01.fzdcbfd12019002,
                            this.fzdcbfd12019003 = fzdcbfd01.fzdcbfd12019003,
                            this.fzdcbfd12019004 = fzdcbfd01.fzdcbfd12019004,
                            this.fzdcbfd12019005 = fzdcbfd01.fzdcbfd12019005,
                            this.fzdcbfd12019006 = fzdcbfd01.fzdcbfd12019006,
                            this.fzdcbfd12019007 = fzdcbfd01.fzdcbfd12019007,
                            this.fzdcbfd12019008 = fzdcbfd01.fzdcbfd12019008,
                            this.fzdcbfd12019009 = fzdcbfd01.fzdcbfd12019009,
                            this.fzdcbfd12019010 = fzdcbfd01.fzdcbfd12019010,
                            this.fzdcbfd12019011 = fzdcbfd01.fzdcbfd12019011,
                            this.fzdcbfd12019029 = fzdcbfd01.plateColorCode,
                            this.currentTagsColor.name = this.getCarColorName(fzdcbfd01.plateColorCode),
                            this.floatorder = fzdcbfd01.floatorder,
                            console.log(result);
                            // 起点、终点、货物种类 编码转换名称
                            this.getCityData();
                            this.getHwzl();
                        }
                    }, error => {
                        console.log("getyhcars request error:" + error);
                    });
                },
                // 校验条件
                check(){
                    if(this.fzdcbfd12019001 == ''){
                        Toast("车牌号码不能为空！");
                    } else if(this.fzdcbfd12019029 == ''){
                        Toast("车牌颜色不能为空！");
                    } else if(this.fzdcbfd12019002 == ''){
                        Toast("日期不能为空！");
                    } else if(this.fzdcbfd12019002.indexOf("-") == -1 || this.fzdcbfd12019002.length > 5 || this.fzdcbfd12019002.length < 3){
                        Toast("日期只能是数字-数字，如2-6！");
                    } else if(this.fzdcbfd12019003 == ''){
                        Toast("趟次序号不能为空！");
                    } else if(this.fzdcbfd12019004 == ''){
                        Toast("趟次数不能为空！");
                    } else if(this.fzdcbfd12019005 == ''){
                        Toast("起点不能为空！");
                    } else if(this.fzdcbfd12019006 == ''){
                        Toast("终点不能为空！");
                    } else if(this.fzdcbfd12019007 == ''){
                        Toast("货物种类不能为空！");
                    } else if(this.fzdcbfd12019008 == ''){
                        Toast("单趟次运量不能为空！");
                    } else if(this.fzdcbfd12019009 == '' && this.fzdcbfd12019010 == ''){
                        Toast("单趟次货物周转量和平均运距至少有一项不能为空！");
                    }
                    //  else if(this.fzdcbfd12019008 > 100){
                    //     Toast("单趟次运量应小于等于100，请核实！");
                    // } else if(this.fzdcbfd12019010 != '' && this.fzdcbfd12019010 > 3500){
                    //     Toast("单趟次平均运距应小于等于3500");
                    // }
                     else {
                        this.commit();
                    }
                },
                commit() {
                    if(this.fzdcbfd12019009==null){this.fzdcbfd12019009=""}
                    if(this.fzdcbfd12019010==null){this.fzdcbfd12019010=""}
                    if(this.fzdcbfd12019011==undefined){this.fzdcbfd12019011=""}
                    let data = {};
                    let fzdcbfd01 = {};
                    fzdcbfd01.recid = this.recid,
                    fzdcbfd01.yhmlk = this.yhmlk = this.$route.query.yhmlk,
                    fzdcbfd01.fzdcbfd12019001 = this.fzdcbfd12019001,
                    fzdcbfd01.fzdcbfd12019029 = this.fzdcbfd12019029,
                    fzdcbfd01.fzdcbfd12019002 = this.fzdcbfd12019002,
                    fzdcbfd01.fzdcbfd12019003 = this.fzdcbfd12019003,
                    fzdcbfd01.fzdcbfd12019004 = this.fzdcbfd12019004,
                    fzdcbfd01.fzdcbfd12019005 = this.fzdcbfd12019005,
                    fzdcbfd01.fzdcbfd12019006 = this.fzdcbfd12019006,
                    fzdcbfd01.fzdcbfd12019007 = this.fzdcbfd12019007,
                    fzdcbfd01.fzdcbfd12019008 = this.fzdcbfd12019008,
                    fzdcbfd01.fzdcbfd12019009 = this.fzdcbfd12019009,
                    fzdcbfd01.fzdcbfd12019010 = this.fzdcbfd12019010,
                    fzdcbfd01.fzdcbfd12019011 = this.fzdcbfd12019011,
                    fzdcbfd01.floatorder = this.floatorder,
                    data.fzdcbfd01 = fzdcbfd01,
                    console.log("辅助表1修改"+JSON.stringify(data));
                    this.axios.post('http://zxdc.catsic.com:9090/sampling/assit/modifyFzdcbfd01', {'data': data}, {
                        'headers': {
                            'Content-Type': 'application/json',
                            'mobileHeader': '{"sessionId":' + localStorage.getItem('sessionId') + '}'
                        }
                    }).then(result => {
                        if (result.data.status == "1000") {
                            console.log("保存成功");
                            console.log(result)
                            this.goback();
                        }
                    }, error => {
                        console.log("getyhcars request error:" + error);
                    });
                },
                goback() {
                    this.$router.go(-1);
                },

                // 选择货物种类
                choseHwzl() {
                this.axios.get("http://zxdc.catsic.com:9090/sampling/json/carTyps").then(
                    response => {
                        console.log("数据加载成功");
                        this.slots[0].values = response.data.hwzl;
                        // this.slots[0].values = response.body.carType;
                        this.popupVisible = true;
                    },
                    response => {
                        console.log("数据加载失败");
                    }
                );
                },
                // 选择车牌颜色
                choseColor() {  
                    this.popupVisibleColor = true;
                },
                //车牌颜色
                handleConfigColor: function() {
                    this.currentTagsColor = this.$refs.pickerColor.getValues()[0];
                    this.fzdcbfd12019029 = this.currentTagsColor.code;
                    this.popupVisibleColor = false;
                },
                // 弹出框点击确定按钮点击事件 add by qzn 20190627
                handleConfig: function() {
                    this.currentTags = this.$refs.picker.getValues()[0];
                    this.hwType = this.currentTags.name;
                    this.fzdcbfd12019007 = this.currentTags.code;
                    this.popupVisible = false;
                },

                showStart1(){
                    this.axios.get("http://zxdc.catsic.com:9090/sampling/json/city").then(
                        response => {
                        console.log("数据加载成功");
                    
                        this.slotss[0].values = response.data.iosProvinces;
                        this.iosProvinces = response.data.iosProvinces;
                        
                        this.slotss[1].values = response.data.iosCitys;
                        this.iosCitys = response.data.iosCitys;

                        this.slotss[2].values = response.data.iosCountys;
                        this.iosCountys = response.data.iosCountys;
                        

                        this.popupVisible1 = true;
                        },
                        response => {
                            console.log("数据加载失败");
                        }
                    );
                    },
                showStart2(){
                    this.axios.get("http://zxdc.catsic.com:9090/sampling/json/city").then(
                        response => {
                        console.log("数据加载成功");
                    
                        this.slotss[0].values = response.data.iosProvinces;
                        this.iosProvinces = response.data.iosProvinces;
                        
                        this.slotss[1].values = response.data.iosCitys;
                        this.iosCitys = response.data.iosCitys;

                        this.slotss[2].values = response.data.iosCountys;
                        this.iosCountys = response.data.iosCountys;
                        

                        this.popupVisible2 = true;
                        },
                        response => {
                        console.log("数据加载失败");
                        }
                    );
                    },

                // 起点  确定按钮
                sure(){
                    var show = false;
                    var result = this.result;
                    var province = this.provinceValue;
                    var city = this.cityValue;
                    var county = this.countyValue;
                    
                    this.startingPoint = province+"-"+city+"-"+county;
                    this.fzdcbfd12019005 = this.countyCode;
                    this.popupVisible1 = false;
                    console.log(show,result, province, city, county,"---"+this.fzdcbfd12019005);
                },
                // 终点  确定按钮
                sure1(){
                    var show = false;
                    var result = this.result;
                    var province = this.provinceValue;
                    var city = this.cityValue;
                    var county = this.countyValue;
                    
                    this.endPoint = province+"-"+city+"-"+county;
                    this.fzdcbfd12019006 = this.countyCode;
                    this.popupVisible2 = false;
                    console.log(show,result, province, city, county,"---"+this.fzdcbfd12019006);
                },

                // 筛选器值变化时调用
        onValuesChange1(picker, values) {
            var cityArray = [],
                countyArray = [];
            if(values[0]){          
                for(let i=0; i<this.iosCitys.length; i++){
                    if(values[0].id == this.iosCitys[i].parentId){
                        cityArray.push(this.iosCitys[i]);
                    }
                }
                picker.setSlotValues(1, cityArray); 
            } 

            if(values[1]){                         
                for(let j=0; j<this.iosCountys.length; j++){
                    if(values[1].id == this.iosCountys[j].parentId){
                        countyArray.push(this.iosCountys[j]);
                    }
                }
                picker.setSlotValues(2, countyArray);
            }
            var result = this.result;
            
            if(typeof(values[1]) == 'object' && typeof(values[2]) == 'object'){
                result = values[0].value + values[1].value + values[2].value;
                this.provinceValue = values[0].value;
                this.cityValue = values[1].value;
                this.countyValue = values[2].value;
                this.countyCode = values[2].id;
                
                for(let i=0; i<this.iosProvinces.length; i++){
                    if(this.iosProvinces[i].value == this.province){
                        this.first = i;
                    }
                }
                for(let i=0; i<cityArray.length; i++){
                    if(this.city == cityArray[i].value){
                        this.second = i;
                    }
                }
                for(var j=0; j<countyArray.length; j++){
                    if(this.county == countyArray[j].value){
                        this.third = j;
                    }
                }
                this.slotss[0].defaultIndex = parseInt(this.first);
                this.slotss[1].defaultIndex = parseInt(this.second);
            }else if(typeof(values[1]) != 'object' && typeof(values[2]) == 'object'){
                values[1] = this.iosCitys;
                result = values[0].value + this.city + values[2].value;
                this.provinceValue = values[0].value;
                this.cityValue = this.city;
                this.countyValue = values[2].value;
                this.countyCode = values[2].id;
            }
            this.result = result;
        },

                getCityData(){
                    this.axios.get("http://zxdc.catsic.com:9090/sampling/json/city").then(
                        response => {
                            console.log("数据加载成功");
                            var provincesArray = [],
                                cityArray = [],
                                countyArray = [];
                            let countyParentId = '', cityParentId = '';
                            provincesArray = response.data.iosProvinces;
                            cityArray = response.data.iosCitys;
                            countyArray = response.data.iosCountys;
                            
                            for(let i=0; i<countyArray.length; i++){
                                if(this.fzdcbfd12019005 == countyArray[i].id){
                                    this.iosCountysName = countyArray[i].value;
                                    countyParentId = countyArray[i].parentId;
                                    console.log("县:"+this.iosCountysName+"-县parentId："+countyParentId);
                                }
                            }
                            for(let j=0; j<cityArray.length; j++){
                                if(countyParentId == cityArray[j].id){
                                    this.iosCitysName = cityArray[j].value;
                                    cityParentId = cityArray[j].parentId;
                                    console.log("市:"+this.iosCitysName+"-市parentId："+cityParentId);
                                }
                            }
                            for(let n=0; n<provincesArray.length; n++){
                                if(cityParentId == provincesArray[n].id){
                                    this.iosProvincesName = provincesArray[n].value;
                                    console.log("省:"+this.iosProvincesName);
                                }
                            }
                            this.startingPoint = this.iosProvincesName+"-"+this.iosCitysName+"-"+this.iosCountysName;

                            let endcount= '',endcity='',endprov='';
                            for(let i=0; i<countyArray.length; i++){
                                if(this.fzdcbfd12019006 == countyArray[i].id){
                                    endcount = countyArray[i].value;
                                    countyParentId = countyArray[i].parentId;
                                    console.log("县:"+endcount+"-县parentId："+countyParentId);
                                }
                            }
                            for(let j=0; j<cityArray.length; j++){
                                if(countyParentId == cityArray[j].id){
                                   endcity = cityArray[j].value;
                                    cityParentId = cityArray[j].parentId;
                                    console.log("市:"+endcity+"-市parentId："+cityParentId);
                                }
                            }
                            for(let n=0; n<provincesArray.length; n++){
                                if(cityParentId == provincesArray[n].id){
                                    endprov = provincesArray[n].value;
                                    console.log("省:"+endprov);
                                }
                            }
                            this.endPoint = endprov+"-"+endcity+"-"+endcount;
                        },
                        response => {
                            console.log("数据加载失败");
                        }
                    );
                },
                getHwzl() {
                    this.axios.get("http://zxdc.catsic.com:9090/sampling/json/carTyps").then(
                        response => {                         
                            let hwzlArray = response.data.hwzl;
                            for(let i=0; i<hwzlArray.length; i++){                   
                                if(this.fzdcbfd12019007 == hwzlArray[i].code){
                                    this.hwType = hwzlArray[i].name;                                  
                                }
                            }
                        },
                        response => {
                            console.log("数据加载失败");
                        }
                    );
                },
                getCarColorName(code) {// 获取货物类型名称
                  var goodsTypes = [
                    {
                      code: "1",
                      name: "蓝色"
                    },
                    {
                      code: "2",
                      name: "黄色"
                    },
                    {
                      code: "3",
                      name: "黑色"
                    },
                    {
                      code: "4",
                      name: "白色"
                    },
                    {
                      code: "5",
                      name: "黄绿"
                    },
                    {
                      code: "6",
                      name: "渐变绿"
                    },
                    {
                      code: "9",
                      name: "其他"
                    }
                  ];
                  var name;
                  goodsTypes.forEach(item => {
                    if (item.code === code) {
                      name = item.name;
                    }
                  });
                  return name;
              },
            },
        }
    </script>
    
    <style lang="scss" scoped>
        .tb {
            padding-top: 10px;
        }
    
        .mint-cell {
            background-color: #efeff4;
        }
        input[type=number] {
        line-height: 21px;
        width: 100%;
        height: 40px;
        margin-bottom: 0px;
        padding: 10px 15px;
        -webkit-user-select: text;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: 3px;
        outline: 0;
        background-color: #fff;
        -webkit-appearance: none;
    }
        .button {
            padding-top: 3%;
            padding-left: 5%;
            padding-right: 5%;
            padding-bottom: 5%;
        }
        .picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 200px;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
}
.usi-btn-cancel,
.usi-btn-sure {
  color: #26a2ff;
}
.mint-popup-bottom {
  width: 100%;
  top: auto;
  right: auto;
  bottom: 0;
}
    </style>